@charset "UTF-8";
/* 基本样式重置 */
ul, li, div, h3 {
    margin: 0;
    padding: 0;
    list-style: none; /* 移除列表前的默认项目符号 */
}

/* 列表项样式 */
ul li {
    border-bottom: 1px solid #ccc; /* 添加底部边框以分隔每个列表项 */
    padding: 10px; /* 添加内边距以增加可读性 */
    background-color: aliceblue;}

/* 日期类样式 */
.date {
    display: flex; /* 使用flex布局来水平排列h3元素 */
    flex-direction: column; /* 改为列布局，但在这里其实默认就是列布局，用于演示如何调整 */
    align-items: flex-start; /* 子元素（h3）在交叉轴上的对齐方式，这里用于控制水平对齐 */
    padding: 10px; /* 为内部元素添加内边距 */
    border-left: 5px solid #007bff; /* 左侧边框，用颜色突出显示 */
    margin-bottom: 10px; /* 底部外边距，可选，根据需求调整 */
}

/* h3元素的样式 */
.date h3 {
    margin-bottom: 5px; /* 底部外边距，增加行与行之间的间距 */
    color: #333; /* 字体颜色 */
    font-size: 16px; /* 字体大小 */
    font-weight: normal; /* 字体粗细，可根据需要调整 */
}

/* 特定信息样式（可选），比如对用户名或房间名称的样式进行微调 */
.date h3:first-child {
    font-weight: bold; /* 第一个h3加粗显示，可能是用户名 */
}

/* 房间ID的样式（可选），例如用不同颜色表示 */
.date h3:nth-child(2) {
    color: #861717; /* 红色字体，表示房间ID */
}

/* 日期范围的样式（可选），如添加斜体 */
.date h3:nth-child(n+3) {
    font-style: italic; /* 斜体显示日期范围 */
}